import React, { useCallback, useRef } from 'react';
import { Textarea } from '@tarojs/components'
import './index.scss'

interface Props {
  placeholder?: string;
  onInput: (val: string) => void;
  onConfirm?: (val: string) => void;
  maxlength?: number;
  className?: string;
  placeholderClass?: string;
  value?: string;
  getInstance?: (instance: unknown) => void;
}

const TextArea: React.FC<Props> = ({
  placeholder, onInput, onConfirm, maxlength, className, placeholderClass,
  value, getInstance, ...rest
}) => {
  const onInputFunc = useCallback(
    e => {
      onInput?.(e.detail?.value);
    },
    [onInput]
  )

  const onConfirmFunc = useCallback(
    e => {
      onConfirm?.(e.detail.value);
    },
    [onConfirm]
  )

  const textArea = useRef()
  getInstance?.(textArea.current)

  return (
    <Textarea
      ref={textArea}
      className={className}
      placeholder={placeholder}
      placeholderClass={placeholderClass}
      onInput={onInputFunc}
      onConfirm={onConfirmFunc}
      maxlength={maxlength}
      value={value}
      {...rest}
    />
  )
}

export default TextArea
